<template>
  <div class="home-box">
    <div class="header">
      <img :src="banner" alt="">
      <!-- 投资顾问 -->
      <div class="jiameng" v-if="is_display_qrcode" @click="handlejiameng">
        <span class="icon"></span>
        <div>
          <p>投资顾问</p>
          <!-- <p>顾问</p> -->
        </div>
      </div>

      <!-- 商务合作 -->
      <!-- <div class="jiameng shangwu" @click="handleshangwu" v-if="is_swzx">
        <span class="icon"></span>
        <div>
          <p>商务合作</p>
        </div>
      </div> -->

      <div class="bottom">

        <div class="time">
          <div>
            <div class="daojishi">{{ new Date(live_time).getMonth() + 1 >= 10 ? new Date(live_time).getMonth() + 1 : '0'+(new Date(live_time).getMonth() + 1) }}月{{new Date(live_time).getDate() >= 10 ? new Date(live_time).getDate() : '0'+new Date(live_time).getDate()}}日 {{new Date(live_time).getHours() >= 10 ? new Date(live_time).getHours() : '0'+new Date(live_time).getHours()}}:{{new Date(live_time).getMinutes() >= 10 ? new Date(live_time).getMinutes() : '0' + new Date(live_time).getMinutes()}} 直播</div>
            <div class="timebox" v-if="limit.daojishi">
              <span class="time_left">距直播开始</span>
              <div class="time_right">
                <span>{{datatime.d}}天</span>
                <span>{{datatime.h}}小时</span>
                <span>{{datatime.m}}分</span>
              </div>
            </div>
          </div>
        </div>

        <div v-if="limit.bmbtn" class="join w242" @click="hadnlejoin">
          预约直播
        </div>
        <div v-if="limit.yuyuebtn" class="yuyuebuttonbox">
          <div class="yuyuebutton" @click="hadnlejoin">
            已结束，联系品牌方
          </div>
        </div>
        <div v-if="limit.guankanbtn" class="guankanbox">
          <!--进入直播间-->
          <div class="guankan" v-if="limit.guankancontent == '进入直播间'" @click="hadnlejoin">{{limit.guankancontent}}</div>
          <!--已预约-->
          <div class="guankan" v-else>{{limit.guankancontent}}</div>
        </div>
        <div class="people">
          <div class="nav">
            <p class="p1">{{pv}}</p>
            <p class="p2">浏览人数</p>
          </div>
          <div class="nav">
            <p class="p1">{{share}}</p>
            <p class="p2">转发人数</p>
          </div>
          <div class="nav">
            <p class="p1">{{register }}</p>
            <p class="p2">预约人数</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品 -->
    <div class="zhibo" v-if="intention_title!= ''">
      <div class="list_item">
        <p>{{intention_title}}</p>
        <span></span>
      </div>
      <div class="zhibo_swiper">
        <mt-swipe :show-indicators="false" :auto="0">
          <mt-swipe-item><div class="swper-div" @click="zhiboliangdian"><img :src="intention_banner" alt="暂无图片"/></div></mt-swipe-item>
        </mt-swipe>
      </div>
    </div>
    <!-- 品牌视频 -->
    <div class="video">
      <div class="list_item">
        <p>品牌视频</p>
        <span></span>
      </div>
      <div class="video_box">
        <div class="video_content">
          <div class="video_nav" v-for="(item, index) in video" :key="index" @click="handlevideo(item)">
            <div class="video_nav_top">
              <span class="play"></span>
              <img :src=" item.cover_img " alt="视频没找到">
            </div>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 可配置banner -->
    <div class="zhibo" v-if="spot_title != ''">
      <div class="list_item">
        <p>{{spot_title}}</p>
        <span></span>
      </div>
      <div class="zhibo_swiper">
        <mt-swipe :show-indicators="false" :auto="0">
          <mt-swipe-item><div class="swper-div" @click="liangdian"><img :src="spot" alt="暂无图片"/></div></mt-swipe-item>
        </mt-swipe>
      </div>
    </div>

    <!-- 详解两点 -->
    <div class="xiangjie">
      <div class="list_item">
        <p>直播亮点</p>
        <span></span>
      </div>
      <div class="img">
        <img
          @click="handimg"
          :src="info"
          alt="暂无图片">
      </div>
    </div>

    <!-- 立即报名 v-model="popupVisible" -->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade">
      <div class="baoming">
        <div class="bm_header">
          <p class="title_1">预约信息</p>
          <p class="title_2">现在预约，抢直播名额</p>
        </div>
        <input class="name input" v-model="form.name" placeholder="请输入您的姓名" type="text">
        <input class="name input" v-model="form.phone" placeholder="请输入您的手机号码" type="tel">
        <div class="city_box">
          <!-- <input class="city input" placeholder="请选择加盟城市" type="text"> -->
          <div :class="form.city ? 'city input city_active' : 'city input'" @click="handlecity">{{ form.city ? form.city : '请选择加盟城市'}}</div>
          <span></span>
        </div>
        <div class="ercode_box">
          <input class="name input" v-model="form.ercode" placeholder="请输入验证码" @input="(e) => handleercode(e)" :maxlength='5' type="text">
          <!-- <span class="getercode">获取验证码</span> -->
          <span v-show="sendAuthCode" class="getercode"  @click="getAuthCode">{{title}}</span>
          <span v-show="!sendAuthCode" class="getercode auth_text_blue">{{auth_time}} s</span>
        </div>
        <!--<p class="baomingnumber"><span>{{registration_num + register }}人</span>已抢直播名额</p>-->
        <div class="selecr_pinpai" v-if="intention_brand.length > 0">
          <p>选择品牌</p>
          <div class="selecr_pinpai_box">
            <span v-for="(item, index) in intention_brand" @click="intention_brandclick(index)" :key="index" :class="item.active ? 'active' : ''">{{item.name}}</span>
          </div>
        </div>
        <mt-button class="submit" :disabled='submitbtn' @click="handlesubmit">提交</mt-button>
        <p class="baomingxieyi"><input type="checkbox" v-model="checked" :checked="checked" />知晓并同意F+智选<a href="javascript: void(0);" @click="handlexieyi">用户协议</a></p>
      </div>
      <img class="bmclose" @click="close" src="../../assets/share/close_radius.png"/>
    </mt-popup>

    <!-- 商务合作 -->
    <mt-popup
      v-model="popupVisible_hezuo"
      popup-transition="popup-fade">
      <div class="baoming hezuo">
        <div class="bm_header">
          <p class="title_1">商务合作</p>
        </div>
        <p class="bm_title">
          红星美凯龙聚合全体系优质招商资源，通过全渠道获客、业务绩效管控、线上精准爆单等措施聚焦经营，提升招商效能！如需加入 “数字化招商，新品路演”服务，请留下您的联系方式。
        </p>
        <input class="name input" v-model="form2.name" placeholder="请输入您的姓名" type="text">
        <input class="name input" v-model="form2.phone" placeholder="请输入联系方式" type="tel">
        <input class="name input" v-model="form2.brand_name" placeholder="请输入单位品牌" type="text">
        <input class="name input" v-model="form2.advisory_matters" placeholder="请输入咨询事项" type="text">
        <mt-button class="submit" :disabled='submitbtnhezuo' @click="handlesubmithezuo">提交</mt-button>
        <div v-if="swqrcode.length>0" class="hezuo_footer">
          <img :src="swqrcode" alt="">
          <p>加微信 联系我</p>
        </div>
      </div>
      <img class="bmclose" @click="close" src="../../assets/share/close_radius.png"/>
    </mt-popup>

    <!-- 显示加盟的二维码 -->
    <mt-popup
      v-model="popupVisiblecode"
      popup-transition="popup-fade">
      <div class="code">
        <p class="title">投资顾问</p>
        <img class="img" :src="qrcode" alt="">
        <p class="code_footer">长按识别二维码联系投资顾问</p>
        <img class="close" @click="close" src="../../assets/share/close_radius.png"/>
      </div>
    </mt-popup>

    <!-- 商品信息简介页面 -->
    <mt-popup
      v-model="popupVisible_shangpin_detail"
      popup-transition="popup-fade"
      position="bottom"
    >
      <div class="shangpinbox">
        <!-- 商品列表 第一步 -->
        <div v-if="shangin_index === 0" class="shangpinitembox">
          <h1>共计{{shangpindata.length}}个商品</h1>
          <div v-for="(obj, i) in shangpindata" :key="i" class="shangpinitem" @click.stop="shangpin_click(obj)">
            <img class="shangpinitem_img" :src="obj.img" alt="">
            <div class="shangpinitem_content">
              <p class="shangpinitem_title">{{obj.title}}</p>
              <p class="shangpinitem_desc">{{obj.describe}}</p>
              <p class="shangpinitem_price">直播价格：{{obj.price}}元</p>
              <img class="shangpinitem_gouwuche" src="../../assets/imgs/gouwuche.png" alt="" srcset="">
            </div>
          </div>
        </div>
        <!-- 商品信息 详情 第2步 -->
        <div v-if="shangin_index === 1" class="shangpinitembox mt30">
          <div class="shangpinitem">
            <img class="shangpinitem_img" :src="shangpinobj.img" alt="">
            <div class="shangpinitem_content">
              <p class="shangpinitem_title">{{shangpinobj.title}}</p>
              <p class="shangpinitem_desc">{{shangpinobj.describe}}</p>
              <div class="dingdan">
                <p class="shangpinitem_price">直播价格：{{shangpinobj.price}}元</p>
                <div class="shangpin_submit" @click="shangpin_submit(1)">立即下单</div>
              </div>
            </div>
          </div>
          <div class="xian"></div>
          <h1>商品介绍</h1>
          <p class="shangpinitem_desc" v-html="shangpinobj.introduction">{{shangpinobj.introduction}}</p>
        </div>
        <!-- 商品信息 详情 第3步 -->
        <div v-if="shangin_index === 2" class="shangpinitembox mt30 mb30" style="height: auto;">
          <div class="shangpinitem">
            <img class="shangpinitem_img" :src="shangpinobj.img" alt="">
            <div class="shangpinitem_content">
              <p class="shangpinitem_title">{{shangpinobj.title}}</p>
              <p class="shangpinitem_desc">{{shangpinobj.describe}}</p>
              <p class="shangpinitem_price">直播价格：{{shangpinobj.price}}元</p>
              <img class="shangpinitem_gouwuche" src="../../assets/imgs/gouwuche.png" alt="" srcset="">
            </div>
          </div>
          <div class="xian"></div>
          <div class="shangpinform">
            <div class="shangpinform_limit">
              <span class="key">姓名</span>
              <input class="input" v-model="shangpinform.name" placeholder="请输入您的姓名" type="text">
            </div>
            <div class="shangpinform_limit">
              <span class="key">手机号码</span>
              <div class="value">
                <input class="input shangpinphone" v-model="shangpinform.phone" placeholder="请输入您的手机号" type="text">
                <span v-show="sendAuthCode" class="getercode"  @click="getAuthCode('shangpin')">{{title}}</span>
                <span v-show="!sendAuthCode" class="getercode auth_text_blue">{{auth_time}} s</span>
              </div>
            </div>
            <div class="shangpinform_limit">
              <span class="key">验证码</span>
              <input class="input" v-model="shangpinform.ercode" @input="(e) => handleercode(e, 'shangpin')" :maxlength='5' placeholder="请输入您的验证码" type="text">
            </div>
            <div class="shangpinform_limit">
              <span class="key">区域</span>
              <!-- <input class="city input" placeholder="请选择加盟城市" type="text"> -->
              <div class="value">
                <div :class="shangpinform.city ? 'city input' : 'city input city_active'" @click="handlecity('shangpin')">{{ shangpinform.city ? shangpinform.city : '请选择加盟城市'}}</div>
              </div>
              <!-- <input class="input" v-model="shangpinform.city" placeholder="请输入您的区域" type="text"> -->
            </div>
            <div class="shangpinform_limit" style="align-items: flex-start;" v-if="intention_brand.length > 0">
              <span class="key">选择品牌</span>
              <div class="value selecr_pinpai_box">
                <span v-for="(item, index) in intention_brand2" @click="intention_brandclick(index,'shangpinform')" :key="index" :class="item.active ? 'active' : ''">{{item.name}}</span>
              </div>
            </div>
            <div class="shangpinform_footer">
              <span class="no" @click="shangpin_back">返回</span>
              <span class="yes" @click="shangpin_submit(2)">确定</span>
            </div>
          </div>
        </div>
        <!-- 商品信息 购买 第4步 -->
        <div v-if="shangin_index === 3" class="shangpinitembox mt30">
          <p class="shangpin_pay_title">确认订单</p>
          <div class="shangpin_pay">
            <span class="shangpin_pay_name">{{shangpinobj.title}}</span>
            <span class="shangpin_pay_price">价格：{{shangpinobj.price}}元</span>
          </div>
          <h1>个人信息</h1>
          <div class="xian"></div>
          <div class="shangpin_pay_limit">
            <span class="key">姓名</span>
            <span class="value">{{shangpinorder.name}}</span>
          </div>
          <div class="shangpin_pay_limit">
            <span class="key">手机号码</span>
            <span class="value">{{shangpinorder.phone}}</span>
          </div>
          <div class="shangpin_pay_limit">
            <span class="key">区域</span>
            <span class="value">{{shangpinorder.city}}</span>
          </div>
          <div class="shangpinform_footer">
            <span class="no" @click="shangpin_back">返回</span>
            <span class="yes" @click="shangpin_submit(3)">立即支付</span>
          </div>
        </div>
        <!-- 商品信息 支付结果 第5步 -->
        <div v-if="shangin_index === 4" class="shangpinitembox mt30">
          <div class="shangpin_pay_end">
            <img src="../../assets/imgs/pay_yes.png" alt="">
            <p>支付成功</p>
          </div>
          <div class="shangpin_pay_limit" v-if="amount">
            <span class="key">支付金额</span>
            <span class="value">￥{{amount}}</span>
          </div>
          <div class="shangpin_pay_limit" v-if="payment_time">
            <span class="key">支付时间</span>
            <span class="value">{{payment_time}}</span>
          </div>
          <div class="shangpinform_footer">
            <span class="no" @click="shangpin_back">返回</span>
            <span class="yes" @click="shangpin_submit(4)">查看订单</span>
          </div>
        </div>
        <div class="shangpin_close" @click="shangpin_close">
        </div>
      </div>
    </mt-popup>
    <common-city
      v-if="showChose"
      :showChose="showChose"
      @closeAdd="closeAdd"
      @sendValue="sendValue"
    />
    <!-- <div class="empty"><p>本次服务由F+智选全程提供,</p><p>商务合作加微信：homefax-xiaojin</p></div> -->
    <wx/>
  </div>
</template>

<script>
import commonHeader from 'common/common-header'
import commonCity from 'common/common-city'
import wx from '../wx'
import weixin from 'weixin-js-sdk'
import { getApp, getVideo, qrcode, swqrcode, appReportPv, business, register, sendCode, subscribe, getGoods, order, payment } from 'api/home-api'
import Vue from 'vue'
import { getUrlParams } from '../../../static/js/utils.js'
export default {
  data () {
    return {
      video: [], // 视频
      live_time: '', // 直播开始时间
      is_live_start: 0, // 直播是否开始
      is_live_end: 0, // 直播是否结束
      live_url: '', // 直播开始时间
      intention_title: '', // 意向跳转链接
      intention_brand: [], // 意向品牌
      intention_brand2: [], // 意向品牌
      intention_brand_index: 0,
      intention_banner: '', // 意向跳转链接
      intention_url: '', // 意向跳转链接
      spot_title: '',
      banner: '', // 直播的头图
      spot: '', // 直播亮点
      info: '', // 直播前亮点详情
      pv_num: 0, // 虚假浏览人数
      share_num: 0, // 虚假分享人数
      registration_num: 0, // 虚假报名人数
      qrcode: '', // 投资顾问二维码
      swqrcode: '', // 商务合作二维码

      pv: 0, // 真实浏览数
      share: 0, // 真实分享书
      register: '1', // 真实报名数

      is_display_qrcode: false, // 是否展示投资顾问二维码
      is_swzx: false, // 是否展示商务咨询 （只有普通用户才会展示）
      num: 0,
      popupVisible: false, // 报名的pup
      popupVisiblecode: false, // 加盟的pup
      popupVisible_yuyue: false, // 预约的pup
      popupVisible_hezuo: false, // 商务合作
      popupVisible_shangpin_detail: false, // 商品信息详情
      checked: true,
      showChose: false, // 地域的选择
      form2: {
      },
      form: {
        phone: ''
      },
      sendAuthCode: true, // 发送验证码的按钮
      auth_time: 0, /* 倒计时 计数器 */
      submitbtn: false, // 提交按钮的点击状态
      submitbtnhezuo: false, // 商务合作的点击状态
      title: '获取验证码', // 获取验证码
      phonedata: '', // 保存验证码已发送成功的手机号码
      datatime: {
        d: '',
        h: '',
        m: '',
        s: ''
      },
      limit: {
        daojishi: true, // 倒计时
        bmbtn: true, // 未预约按钮
        yuyuebtn: false, // 预约按钮
        guankanbtn: false, // 进入直播间按钮
        guankancontent: '' // 直播标题
      },
      ymtitle: '',
      shangpincity: '', // 商品城市
      shangpindata: [], // 商品列表信息
      shangpinobj: {}, // 当前选中商品
      shangin_index: 0, // 商品弹窗所在的步奏
      shangpinorder: {}, // 商品订单信息
      shangpinform: {}, // 购买商品的用户信息的弹窗
      amount: '',
      payment_time: ''
    }
  },
  created() {
    this.getApp() // 获取直播间资源
    this.getVideo() // 获取视频
    this.getQrcode() // 获取投资顾问二维码
    this.appReportPv() // 获取个人邀请分享数字
    this.getGoods() // 获取商品列表
    var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    this.ymtitle = user['app_name']
    this.getswqrcode() // 获取商务合作的二维码
    this.is_swzx = true // 显示商务合作
    if (user['is_register'] === '1' || user['is_register'] === 1) {
      // 用户已经注册了
      Vue.set(this.limit, 'bmbtn', false)
      Vue.set(this.limit, 'guankanbtn', true)
      Vue.set(this.limit, 'guankancontent', '已预约,开播前2小时入场')
      Vue.set(this.limit, 'yuyuebtn', false)
    }
    if (getUrlParams('ljbm')) {
      this.popupVisible = true
    }
    this.fitIos()
    if (getUrlParams('goodspay') && parseInt(getUrlParams('goodspay')) === 4) {
      this.popupVisible_shangpin_detail = true
      this.shangin_index = parseInt(getUrlParams('goodspay'))
    }
    if (getUrlParams('amount')) {
      this.amount = getUrlParams('amount')
    }
    if (getUrlParams('payment_time')) {
      this.payment_time = this.formatUnixtimestamp(getUrlParams('payment_time'))
    }
  },
  methods: {
    formatUnixtimestamp (unixtimestamp) {
      unixtimestamp = new Date(parseInt(unixtimestamp * 1000))
      var year = 1900 + unixtimestamp.getYear()
      var month = '0' + (unixtimestamp.getMonth() + 1)
      var date = '0' + unixtimestamp.getDate()
      var hour = '0' + unixtimestamp.getHours()
      var minute = '0' + unixtimestamp.getMinutes()
      var second = '0' + unixtimestamp.getSeconds()
      return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length) + ' ' + hour.substring(hour.length - 2, hour.length) + ':' + minute.substring(minute.length - 2, minute.length) + ':' + second.substring(second.length - 2, second.length)
    },
    fitIos() {
      // var u = navigator.userAgent
      var flag
      var myFunction
      document.body.addEventListener('focusin', () => { // 软键盘弹起事件
        flag = true
        clearTimeout(myFunction)
      })
      document.body.addEventListener('focusout', () => { // 软键盘关闭事件
        flag = false
        if (!flag) {
          myFunction = setTimeout(function() {
            window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })// 重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
          }, 200)
        }
      })
    },
    // 获取商品列表
    getGoods: function() {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      var param = { 'app_id': user['app_id'] }
      getGoods(param).then(response => {
        console.log(response)
        if (response.code === 0) {
          this.shangpindata = response.data
        }
      }).catch((err) => {
        console.log(err + '商品列表数据获取失败')
      })
    },
    // 倒计时
    countTime: function(value) {
      // 获取当前时间
      var date = new Date()
      var now = date.getTime()
      // 设置截止时间
      var endDate = new Date(value)
      var end = endDate.getTime()
      // 时间差
      var leftTime = end - now
      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        this.datatime.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)// 天数我没用到，暂且写上
        this.datatime.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
        this.datatime.m = Math.floor((leftTime / 1000 / 60) % 60)
        this.datatime.s = Math.floor((leftTime / 1000) % 60)
      }
      // 递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime, 1000)
    },
    GetDateDiff(startDiffTime) {
      // 将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
      var startTime = startDiffTime.replace(/-/g, '/')
      return startTime
    },
    getApp () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      var param = { 'app_id': user['app_id'] }
      getApp(param).then(response => {
        var data = response.data
        this.live_time = this.GetDateDiff(data.live_time) // 直播开始时间
        this.is_live_start = data.is_live_start // 直播是否结束
        this.is_live_end = data.is_live_end // 直播是否结束
        this.live_url = data.live_url // 直播跳转链接
        this.intention_title = data.intention_title || '' // 商品标题
        this.intention_banner = data.intention_banner || '' // 商品banner图
        this.spot_title = data.spot_title || '' // 亮点标题

        this.form.intention_brand = data.intention_brand.length > 0 ? data.intention_brand[0] : ''
        this.shangpinform.intention_brand = data.intention_brand.length > 0 ? data.intention_brand[0] : ''
        // this.intention_brand = data.intention_brand || [] // 意向品牌
        if (data.intention_brand.length > 0) {
          data.intention_brand.map((item, index) => {
            this.intention_brand.push({
              name: item,
              active: (index == 0)
            })
            this.intention_brand2.push({
              name: item,
              active: (index == 0)
            })
          })
        } else {
          this.intention_brand = []
          this.intention_brand2 = []
        }
        this.intention_url = data.intention_url || '' // 意向跳转链接
        this.banner = data.banner // 直播头图
        this.spot = data.spot // 直播亮点图
        this.info = data.info // 直播详解亮点
        this.pv = data.pv // 真实浏览数
        this.share = data.share // 真实分享数
        this.register = data.register // 真实报名数
        this.countTime(this.live_time) // 倒计时
        if (this.is_live_start === 1) {
          // 直播开始，倒计时结束
          Vue.set(this.limit, 'daojishi', false)
          Vue.set(this.limit, 'bmbtn', false)
          Vue.set(this.limit, 'guankanbtn', true) // 观看按钮
          Vue.set(this.limit, 'yuyuebtn', false)
          Vue.set(this.limit, 'guankancontent', '进入直播间')
        }
        if (this.is_live_end === 1) {
          // 直播结束了
          Vue.set(this.limit, 'bmbtn', false)
          Vue.set(this.limit, 'guankanbtn', false)
          Vue.set(this.limit, 'yuyuebtn', true) // 结束按钮
        }
        localStorage.setItem('is_live_end', this.is_live_end)
        localStorage.setItem('is_live_start', this.is_live_start)
      }).catch(err => {
        console.log(err)
      })
    },
    getVideo () {
      var user = JSON.parse(localStorage.getItem('user'))
      var param = { 'app_id': user['app_id'] }
      getVideo(param).then(response => {
        var data = response.data
        this.video = data
      }).catch(err => {
        console.log(err)
      })
    },
    getQrcode () {
      var user = JSON.parse(localStorage.getItem('user'))
      // 如果是种子用户就不请求 分享链接
      var param = { 'app_id': user['app_id'], 'user_id': user['user_id'] }
      qrcode(param).then(response => {
        var data = response.data
        if (data.qrcode) {
          this.is_display_qrcode = true
          this.qrcode = data.qrcode
        }
      }).catch(err => {
        console.log(err)
      })
    },
    appReportPv () {
      var user = JSON.parse(localStorage.getItem('user'))
      var param = { 'app_id': user['app_id'] }
      appReportPv(param).then(response => {
      }).catch()
    },
    todetail() {
      this.$router.togo('/lookvideo')
    },
    getswqrcode () {
      swqrcode({}).then(response => {
        var data = response.data
        if (response.code === 0) {
          this.swqrcode = data.url
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 点击加盟
    handlejiameng () {
      this.popupVisiblecode = true
    },
    // 点击商务合作
    handleshangwu () {
      this.popupVisible_hezuo = true
    },
    // 点击  进入直播间 预约直播 联系品牌
    hadnlejoin () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      var liveStart = localStorage.getItem('is_live_start') ? localStorage.getItem('is_live_start') : 0
      var liveEnd = localStorage.getItem('is_live_end') ? localStorage.getItem('is_live_end') : 0
      if (user['is_register'] === '1' || user['is_register'] === 1) {
        if ((liveStart === 1 || liveStart === '1') && (liveEnd === 0 || liveEnd === '0')) {
          let Base64 = require('js-base64').Base64
          window.location.href = this.live_url + '?tuid=' + user['storage_id'] + '&nickname=' + Base64.encode(user['nickname']) + '&avatar=' + user['headimgurl']
        }
      } else {
        this.popupVisible = true
      }
    },
    // 地域的点击
    handlecity (type) {
      if (type === 'shangpin') {
        this.shangpincity = 'shangpin'
      } else {
        this.shangpincity = ''
      }
      this.showChose = true
    },
    // 获取选择的地域
    sendValue (value) {
      console.log(this.form, value)
      this.showChose = false
      if (this.shangpincity === 'shangpin') {
        this.shangpinform.city = value
      } else {
        this.form.city = value
      }
    },
    // 点击获取验证码
    getAuthCode (type) {
      const { form, shangpinform } = this
      if (type === 'shangpin') {
        if (shangpinform.phone && shangpinform.phone.length !== 11) {
          this.$toast('请输入正确的手机号')
          return
        }
      } else {
        if (form.phone.length !== 11) {
          this.$toast('请输入正确的手机号')
          return
        }
      }
      this.title = '重新发送'
      this.sendAuthCode = false
      this.auth_time = 60
      var authTimetimer = setInterval(() => {
        this.auth_time--
        if (this.auth_time <= 0) {
          this.sendAuthCode = true
          clearInterval(authTimetimer)
        }
      }, 1000)
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      if (user['is_staff'] === '1') {
        this.$toast('您是种子用户,不能预约')
        return
      }
      // TODO 发送短信验证码
      var param = { 'app_id': user['app_id'], 'phone': type === 'shangpin' ? shangpinform.phone : form.phone, 'is_baoming': 1 }
      sendCode(param).then(response => {
        if (response.code == 0) {
          this.phonedata = form.phone
        } else {
          this.$toast(response.info)
        }
      })
    },
    // 点击选择品牌
    intention_brandclick(index, name) {
      var arr = []
      if (name === 'shangpinform') {
        this.intention_brand2[index].active = !this.intention_brand2[index].active
        arr = JSON.parse(JSON.stringify(this.shangpinform.intention_brand)).split(',')
        if (this.intention_brand2[index].active) {
          arr.push(this.intention_brand2[index].name)
        } else {
          if (arr.indexOf(this.intention_brand2[index].name) > -1) {
            arr.splice(arr.indexOf(this.intention_brand2[index].name), 1)
          }
        }
        this.shangpinform.intention_brand = arr.join(',')
        console.log(this.shangpinform.intention_brand, 'this.shangpinform.intention_brand')
        
      } else {
        this.intention_brand[index].active = !this.intention_brand[index].active
        arr = JSON.parse(JSON.stringify(this.form.intention_brand)).split(',')
        if (this.intention_brand[index].active) {
          arr.push(this.intention_brand[index].name)
        } else {
          if (arr.indexOf(this.intention_brand[index].name) > -1) {
            arr.splice(arr.indexOf(this.intention_brand[index].name), 1)
          }
        }
        this.form.intention_brand = arr.join(',')
        console.log(this.form.intention_brand, 'this.form.intention_brand')
      }
    },
    // 提交报名
    handlesubmit () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      const { checked } = this
      if (!checked) {
        this.$toast('请勾选用户协议')
        return
      }
      if (!this.form.name) {
        this.$toast('请输入名字')
        return
      }
      if (!this.form.phone) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.form.city) {
        this.$toast('请选择加盟城市')
        return
      }
      if (!this.form.ercode) {
        this.$toast('请输入验证码')
        return
      }
      this.form.app_id = user['app_id']
      this.form.user_id = user['user_id'] // 种子用户的ID
      this.form.id = user['id'] // 种子用户的ID
      this.form.inviter_id = user['inviter_id'] // 种子用户的ID
      this.form.inviter_name = user['inviter_name'] // 种子用户的ID
      this.form.source = user['source'] // 来源
      this.submitbtn = true
      // 进入直播间 预约直播 联系品牌
      if (this.is_live_end === 0 || this.is_live_end === '0') {
        this.form.is_baoming = 1
        register(this.form).then(response => {
          if (response.code === 0) {
            // 设置是否合作
            user.is_register = '1'
            user.storage_id = response.data.storage_id
            this.limit.bmbtn = false
            Vue.set(this.limit, 'bmbtn', false)
            this.limit.guankanbtn = true
            Vue.set(this.limit, 'guankanbtn', true)
            localStorage.setItem('user', JSON.stringify(user))
            this.$toast('报名成功')
            if (this.limit.guankancontent == '进入直播间') {
              let Base64 = require('js-base64').Base64
              window.location.href = this.live_url + '?tuid=' + response.data.storage_id + '&nickname=' + Base64.encode(user['nickname']) + '&avatar=' + user['headimgurl']
            } else {
              Vue.set(this.limit, 'guankancontent', '已预约,开播前2小时入场')
            }
          } else {
            this.$toast(response.info || response.info || '报名失败')
          }
          this.submitbtn = false
          this.popupVisible = false
          this.$toast(response.info)
        })
      } else {
        // 预约下一场
        subscribe(this.form).then(response => {
          this.form.is_baoming = 2
          if (response.code == 0) {
            // 设置是否合作
            user.is_register = '1'
            this.limit.bmbtn = false
            Vue.set(this.limit, 'bmbtn', false)
            this.limit.guankanbtn = false
            Vue.set(this.limit, 'guankanbtn', false)
            this.limit.yuyuebtn = true
            Vue.set(this.limit, 'yuyuebtn', true)
            localStorage.setItem('user', JSON.stringify(user))
            this.$toast('预约成功')
          } else {
            this.$toast(response.info || '预约失败')
          }
          this.submitbtn = false
          this.popupVisible = false
        })
      }
    },
    // 点击商务合作的提交按钮
    handlesubmithezuo () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      if (!this.form2.name) {
        this.$toast('请输入您的名字')
        return
      }
      if (!this.form2.phone) {
        this.$toast('请输入联系方式')
        return
      }
      if (!this.form2.brand_name) {
        this.$toast('请输入单位品牌')
        return
      }
      if (!this.form2.advisory_matters) {
        this.$toast('请输入咨询事项')
        return
      }
      this.form2.app_id = user['app_id']
      this.form2.user_id = user['user_id']
      this.form2.inviter_id = user['inviter_id']
      this.form2.inviter_name = user['inviter_name']
      this.submitbtnhezuo = true
      this.form2.is_baoming = 3
      business(this.form2).then(data => {
        if (data.code == 0) {
          this.popupVisible_hezuo = false
          this.$toast('提交成功')
        } else {
          this.$toast(data.info)
        }
        this.submitbtnhezuo = false
      }).catch(() => {
        this.submitbtnhezuo = false
        this.$toast('提交失败，出现了不可预知的错误')
      })
    },
    // 点击视频
    handlevideo (value) {
      this.$router.togo('/lookvideo?id=' + value.id)
    },
    // 意向跳转链接
    liangdian () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      if (user['is_staff'] === '1' || user['is_staff'] == 1) {
        // 种子用户直播前中后 一直显示去直播间
        if (this.intention_url) {
          window.location.href = this.intention_url
        }
      } else {
        if (user['is_register'] === '1' || user['is_register'] == 1) {
          // 用户已经注册了
          if (this.intention_url) {
            window.location.href = this.intention_url
          }
        } else {
          // 未报名的用户，弹框 已报名的用户 点击进入直播间
          this.popupVisible = true
        }
      }
    },
    closeAdd () {
      this.showChose = false
    },
    close () {
      this.popupVisiblecode = false
      this.popupVisible = false
      this.popupVisible_yuyue = false
      this.popupVisible_hezuo = false
    },
    // 点击图片
    handimg (e) {
      if (e.target.nodeName == 'IMG') {
        console.log(e.target.currentSrc)
        weixin.ready(function() {
          weixin.previewImage({
            'urls': [e.target.currentSrc],
            'current': e.target.currentSrc
          })
        })
      }
    },
    // 用户协议
    handlexieyi () {
      this.$router.togo('/xieyi')
    },
    // 点击直播亮点
    zhiboliangdian () {
      this.popupVisible_shangpin_detail = true
    },
    // 商品close
    shangpin_close () {
      this.shangin_index = 0
      this.popupVisible_shangpin_detail = false
    },
    // 商品列表 点击
    shangpin_click (value) {
      this.shangpinobj = value
      this.shangin_index = 1
    },
    // 商品信息 立即下单
    shangpin_submit (e) {
      console.log(e)
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      if (e == 1) {
        order({}).then(response => {
          if (response.code === 0) {
            this.shangin_index = 3
            this.shangpinorder = response.data
            // this.shangpinform = response.data
          } else {
            this.shangin_index = 2
          }
        }).catch((err) => {
          console.log(err + '立即下单失败')
        })
      } else if (e == 2) {
        if (!this.shangpinform.name) {
          this.$toast('请输入名字')
          return
        }
        if (!this.shangpinform.phone) {
          this.$toast('请输入手机号')
          return
        }
        if (!this.shangpinform.city) {
          this.$toast('请输入区域')
          return
        }
        if (!this.shangpinform.ercode) {
          this.$toast('请输入验证码')
          return
        }
        console.log('')
        this.shangpinform.app_id = user['app_id']
        this.shangpinform.user_id = user['user_id'] // 种子用户的ID
        this.shangpinform.id = user['id'] // 种子用户的ID
        this.shangpinform.inviter_id = user['inviter_id'] // 种子用户的ID
        this.shangpinform.inviter_name = user['inviter_name'] // 种子用户的ID
        this.shangpinform.is_baoming = 4
        register(this.shangpinform).then(response => {
          if (response.code == 0) {
            this.shangpinorder.name = this.shangpinform.name
            this.shangpinorder.phone = this.shangpinform.phone
            this.shangpinorder.city = this.shangpinform.city
            this.shangin_index = 3
          } else {
            this.$toast(response.info)
          }
          this.submitbtn = false
          this.popupVisible = false
        })
      } else if (e == 3) {
        // 点击立即支付
        /*
          inviter_id 邀请ID
          * app_id 项目ID
          * user_id 种子ID
          * goods_id 商品ID
        */
        // var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
        var param = {}
        param.inviter_id = user['inviter_id'] // 邀请ID
        param.inviter_name = user['inviter_name'] // 邀请ID
        param.app_id = user['app_id'] // 项目ID
        param.user_id = user['user_id'] // 种子ID
        param.goods_id = this.shangpinobj.id // 商品ID
        param.source = user['source'] // 商品ID
        // 立即支付
        this.paywx(param)
      } else if (e == 4) {
        // 点击查看订单
        this.popupVisible_shangpin_detail = false
        this.$router.togo('/my')
      } else {
        this.shangin_index++
      }
    },
    // 商品信息返回
    shangpin_back () {
      this.shangin_index = 0
    },
    // 立即支付
    paywx (param) {
      var data = {}
      function onBridgeReady() {
        window.WeixinJSBridge.invoke('getBrandWCPayRequest', {
          'appId': data.appId, // 公众号名称，由商户传入
          'timeStamp': data.timeStamp, // 时间戳，自1970年以来的秒数
          'nonceStr': data.nonceStr, // 随机串
          'package': data.package,
          'signType': data.signType, // 微信签名方式：
          'paySign': data.paySign // 微信签名
        }, (res) => {
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            this.shangin_index = 4
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
        })
      }
      payment(param).then(response => {
        if (response.code == 0) {
          data = response.data
          if (typeof WeixinJSBridge == 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
            }
          } else {
            onBridgeReady()
          }
        } else {
          this.shangin_index = 2
          this.$toast(response.info)
        }
      }).catch((err) => {
        console.log(err + '商品支付获取失败')
      })
    },
    // 验证码校验
    handleercode(e, type) {
      console.log(e.target.value)
      if (e.target.value.length >= 5) {
        this.$toast('请输入4位验证码')
        if (type == 'shangpin') {
          this.$set(this.shangpinform, 'ercode', e.target.value.slice(0, 4))
        } else {
          this.$set(this.form, 'ercode', e.target.value.slice(0, 4))
        }
      }
    }
  },
  components: {
    commonHeader,
    commonCity,
    wx
  },
  computed: {
    // ...mapGetters([
    //   'number'
    // ]),
    // ...mapState({
    //   number: state => state.home.number
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.home-box{
  .header{
    width: 100%;
    overflow: hidden;
    .h(898);
    position: relative;
    img{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
    }
    .jiameng{
      position: fixed;
      z-index: 4;
      right: 0px;
      .top(80);
      .w(176);
      .h(52);
      background:linear-gradient(90deg,rgba(255,200,17,1) 0%,rgba(255,140,0,1) 100%);
      box-shadow:0px 2px 8px 0px rgba(0,0,0,0.23);
      .btl-radius(24);
      .bbl-radius(24);
      color: #FFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      .icon{
        .ml(14);
        .w(36);
        .h(32);
        display: block;
        background-image: url("../../assets/share/jiameng.png");
        background-repeat: no-repeat;
        background-size: 100%;
      }
      div{
        .mr(8);
        .fs(26);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        white-space: nowrap;
      }
    }
    .shangwu{
      background:linear-gradient(90deg,rgba(253,100,79,1) 0%,rgba(251,75,75,1) 100%);
      .top(200);
      .left(0);
      right: auto;
      .btl-radius(0);
      .bbl-radius(0);
      .btr-radius(24);
      .bbr-radius(24);
      .icon{
        .w(28);
        .h(28);
        background-image: url("../../assets/imgs/swhz.png");
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    .bottom{
      width:100%;
      .h(362);
      .mt(538);
      overflow: hidden;
      background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.59) 24%,rgba(0,0,0,0.86) 100%);
      position: relative;
      z-index: 3;
      .time{
        .mt(38);
        .h(96);
        width: 100%;
        .timebox{
          display: flex;
          justify-content: center;
          .mt(16);
          .h(40);
        }
        .time_left{
          display: inline-block;
          // width: 50%;
          .mr(10);
          .h(40);
          .fs(24);
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,192,0,1);
          .lh(40);
          text-align: right;
        }
        .time_right{
          text-align: left;
          .ml(10);
          display: inline-block;
          // width: 50%;
          span{
            display: inline-block;
            .h(40);
            background:rgba(248,63,67,0.8);
            .b-radius(8);
            .pl(8);
            .pr(8);
            color: #FFF;
            .fs(24);
            .lh(40);
            opacity:0.9;
          }
        }
      }
    }
    .daojishi{
      margin: 0 auto;
      .fs(28);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(233,233,233,1);
      .h(40);
      .lh(40);
    }
    .join,.yuyuebutton,.guankan{
      margin: 0 auto;
      .mt(20);
      .h(72);
      background:linear-gradient(90deg,rgba(252,101,79,1) 0%,rgba(252,74,76,1) 100%);
      box-shadow:0px 10px 20px 0px rgba(17,12,3,0.1);
      .b-radius(36);
      .fs(32);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(255,255,255,1);
      .lh(72);
      letter-spacing:2px;
    }
    .w242{
      .pl(50);
      .pr(50);
      display: inline-block;
    }
    .yuyuebuttonbox,.guankanbox{
      .mt(0);
      p{
        .h(32);
        .fs(24);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(233,233,233,1);
        .lh(34);
      }
    }
    .yuyuebutton{
      .fs(32);
      .pl(50);
      .pr(50);
      display: inline-block;
      background:linear-gradient(180deg,rgba(225,189,86,1) 0%,rgba(134,96,34,1) 100%);
    }
    .guankan{
      .mt(14);
      .fs(32);
      .pl(50);
      .pr(50);
      display: inline-block;
      // background:linear-gradient(180deg,rgba(225,189,86,1) 0%,rgba(134,96,34,1) 100%);
      background: linear-gradient(180deg, #FFBD00 0%, #FF9F00 100%);
    }
    .number{
      .h(34);
      .fs(24);
      font-family:PingFangSC-Semibold,PingFang SC;
      font-weight:600;
      color:rgba(255,192,0,1);
      .lh(34);
      .mt(12);
    }

    .people{
      .mt(24);
      width: 100%;
      display: flex;
      color: #FFF;
      .nav{
        width: 33.33%;
        .p1{
          .h(50);
          .fs(36);
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,255,255,1);
          .lh(50);
        }
        .p2{
          .h(36);
          .fs(26);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          .lh(36);
        }
      }
    }
  }

  .list_item{
    .h(34);
    .fs(34);
    .ml(30);
    text-align: left;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(39,39,39,1);
    .lh(34);
    position: relative;
    span{
      .w(240);
      .h(12);
      background:linear-gradient(90deg,rgba(248,63,67,1) 0%,rgba(255,79,79,0.06) 100%);
      .btr-radius(200);
      .bbr-radius(200);
      display: block;
      position: absolute;
      bottom: 0px;
      left: 0px;
      opacity:0.36;
    }
  }

  .video{
    .mt(44);
    .video_box{
      overflow: hidden;
      .mt(30);
      .h(248);
      .video_content{
        text-align: left;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        .lh(248);
        .h(288);
      }
      .video_nav{
        .w(300);
        .h(248);
        display: inline-block;
        .mr(20);
        .video_nav_top{
          width: 100%;
          .h(188);
          position: relative;
          img{
            width: 100%;
            height: 100%;
            background: #EDEDED;
            .b-radius(12);
          }
          .play{
            .w(70);
            .h(70);
            display: inline-block;
            position: absolute;
            z-index: 3;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-size: 100%;
            background-image: url("../../assets/share/play.png");
          }
        }
        p{
          .mt(20);
          .h(40);
          .fs(28);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(70,70,70,1);
          .lh(40);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .video_nav:first-child{
        .ml(30);
      }
      .video_nav:last-child{
        .mr(20);
      }
    }
  }

  .zhibo{
    .mt(44);
    .zhibo_swiper{
      width: 92.22%;
      margin: 0 auto;
      .h(456);
      .mt(30);
      .swper-div{
        width: 100%;
        height: 100%;
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
        img{
          width: 100%;
          height: 100%;
          background:rgba(237,237,237,1);
          .b-radius(12);
        }
      }
    }
  }

  .xiangjie{
    .mt(44);
    .img{
      width: 92.22%;
      margin: 0 auto;
      .mt(30);
      img{
        width: 100%;
        height: 100%;
        background:rgba(237,237,237,1);
        .b-radius(12);
      }
    }
  }

  .code{
    .w(630);
    .h(676);
    .b-radius(12);
    background: #FFF;
    position: relative;
    .close{
      display: block;
      .w(64);
      .h(64);
      position: absolute;
      .bottom(-120);
      left: 50%;
      transform: translate(-50%);
      // background: #FFF;
      // background: url("../../assets/share/close_radius.png") no-repeat center;
      // background-size: 100%;
    }
    .title{
      .h(130);
      .fs(40);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:#F83F43;
      .lh(130);
      background: url("../../assets/share/jm_bg.png") no-repeat center;
      background-size: 100%;
    }
    .img{
      .w(336);
      .h(336);
      background: pink;
      margin: 0 auto;
      .mt(62);
      display: block
    }
    .code_footer{
      .h(42);
      .fs(30);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      // color:rgba(248,63,67,1);
      color: #000;
      .mt(40);
      .lh(42);
    }
  }
  .shangpinbox{
    .w(750);
    .minh(814);
    box-sizing: border-box;
    background: #fff;
    .btl-radius(20);
    .btr-radius(20);
    position: relative;
    .padding(30, 30, 0, 30);
    text-align: left;
    overflow: hidden;
    h1{
      .fs(30);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #242424;
      .lh(42);
      .h(42);
      .mt(30);
      .mb(60);
    }
    .shangpinitembox{
      .h(742);
      .maxh(1000);
      overflow-y: scroll;
      .xian{
        width: 100%;
        .h(2);
        background: #E9E9E9;
        .mt(-30);
      }
      .mt0{
        .mt(0);
      };
    }
    .shangpinitem_desc{
      .fs(28);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #929292;
      .lh(40);
      overflow: hidden;
      .mt(-40);
    }
    .shangpin_submit{
      .w(132);
      .h(48);
      background: linear-gradient(90deg, #FC654F 0%, #FC4A4C 100%);
      .b-radius(40);
      .fs(24);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      .lh(48);
      color: #FFFFFF;
      text-align: center;
    }
    .shangpinitem{
      .mb(60);
      width: 100%;
      .h(192);
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      .shangpinitem_img{
        .w(192);
        .h(192);
        background: #E9E9E9;
        .b-radius(20);
        .fs(0);
        border: none;
      }
      .shangpinitem_content{
        .w(498);
        box-sizing: border-box;
        .pl(20);
        position: relative;
        .shangpinitem_title{
          .h(44);
          .fs(32);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          .lh(44);
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .shangpinitem_desc{
          .h(80);
          .fs(28);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #929292;
          .lh(40);
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp:3;
          -webkit-box-orient:vertical;
          .mt(15);
        }
        .shangpinitem_price{
          .mt(15);
          .h(38);
          .fs(28);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #F83F43;
          .lh(38);
        }
        .dingdan{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .shangpinitem_price{
            .mt(0)
          }
        }
        .shangpinitem_gouwuche{
          .w(60);
          .h(60);
          position: absolute;
          right: 0px;
          bottom: 0px;
          .b-radius(30);
        }
      }
    }
    .shangpinform_limit{
      .pl(15);
      .pr(15);
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mt(24);
      .key{
        .h(40);
        .fs(28);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242424;
        .lh(40);
      }
      .shangpinphone{
        .w(324);
      }
      .value{
        .w(492);
      }
      .selecr_pinpai_box{
        display: flex;
        flex-wrap: wrap;
        span{
          text-align: center;
          .lh(34);
          .mr(34);
          .mb(24);
          .h(34);
          background: #F5F5F5;
          .b-radius(24);
          .pl(14);
          .pr(14);
          .pt(6);
          .pb(6);
          .fs(24);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #929292;
          .border-solid(2, #ffffff)
        }
        .active{
          color: #F83F43;
          background: #FEEDE8;
          .border-solid(2, rgba(248, 63, 67, 0.79))
        }
      }
      .city_active{
        color: #929292;
      }
      .getercode{
        color: #FC4E4C;
        .fs(24);
        .ml(24);
      }
    }
    .shangpinform_footer{
      .fs(36);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      box-sizing: border-box;
      .pl(15);
      .pr(15);
      .mt(38);
      .no{
        .w(290);
        .h(80);
        background: #BEBEBE;
        .b-radius(46);
        .lh(80);
      }
      .yes{
        .w(290);
        .h(80);
        background: linear-gradient(90deg, #FC654F 0%, #FC4A4C 100%);
        .b-radius(46);
        .lh(80);
      }
    }
    .shangpin_pay_title{
      width: 100%;
      .h(56);
      .fs(40);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #242424;
      .lh(56);
      text-align: center;
    }
    .shangpin_pay{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mt(40);
      .mb(60);
      .shangpin_pay_name{
        .h(44);
        .fs(32);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        .lh(44);
      }
      .shangpin_pay_price{
        .h(44);
        .fs(32);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #F83F43;
        .lh(44);
      }
    }
    .shangpin_pay_limit{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .pl(15);
      .pr(15);
      .key{
        .fs(28);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #464646;
        .lh(72);
        .h(72);
      }
      .value{
        .fs(28);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #272727;
        .lh(72);
        .h(72);
      }
    }
    .shangpin_pay_limit:first-child{
      .mt(20);
    }
    .shangpin_pay_end{
      .mt(60);
      .mb(60);
      text-align: center;
      img{
        .w(120);
        .h(120);
        .mb(8);
      }
      p{
        .fs(30);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1AAD19;
        .lh(52);
        .h(52);
      }
    }
    .input{
      .w(492);
      .h(72);
      border: 0;  // 去除未选中状态边框
      outline: none; // 去除选中状态边框
      background:rgba(245,245,245,1);
      .b-radius(12);
      .fs(30);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color: #000;
      .lh(60);
      .t-indent(40);
      caret-color: #000;
    }
    input:focus{
      outline:none;
      caret-color: #000;
    }
    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #929292;
    }
    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #929292;
    }
    :-ms-input-placeholder {
        /* IE 10+ */
        color: #929292;
    }
    :-moz-placeholder {
        /* Firefox 18- */
        color: #929292;
    }
    .shangpin_close{
      display: flex;
      flex-direction: column;
      .w(36);
      .h(36);
      background: url("../../assets/share/close.png") no-repeat center;
      background-size: cover;
      position: absolute;
      .right(30);
      .top(30);
    }
  }
  .yuyue{
    .w(630);
    .h(494);
    background: #FFF;
    .b-radius(12);
    position: relative;
    .close{
      display: block;
      .w(64);
      .h(64);
      position: absolute;
      .bottom(-120);
      left: 50%;
      transform: translate(-50%);
      // background: url("../../assets/share/close_radius.png") no-repeat center;
      // background-size: 100%;
    }
    img{
      .w(120);
      .h(120);
      margin: 0 auto;
      .mt(60);
    }
    h1{
      .h(60);
      .fs(36);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(39,39,39,1);
      .lh(60);
      text-align: center;
      .mt(20);
    }
    p{
      color: #929292;
      .lh(52);
      .h(52);
      .fs(28);
      font-family:PingFangSC-Medium,PingFang SC;
      text-align: center;
    }
    .submit{
      .w(470);
      .h(80);
      background:linear-gradient(90deg,rgba(252,101,79,1) 0%,rgba(252,74,76,1) 100%);
      .b-radius(40);
      .fs(40);
      display: block;
      .lh(80);
      margin: 0 auto;
      .mt(30);
      color: #FFF;
    }
  }

  .baoming{
    .w(670);
    background: #FFF;
    position: relative;
    .pb(40);
    .b-radius(12);
    .title_1{
      .h(60);
      .fs(44);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      .lh(60);
      .mt(40);
      color:rgba(248,63,67,1);
    }
    .title_2{
      .mt(4);
      .h(44);
      .fs(32);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      .lh(44);
      color:rgba(248,63,67,1);
    }
    .bm_header{
      .w(670);
      .h(184);
      overflow: hidden;
      background: url("../../assets/share/bm_bg.png") no-repeat center;
      background-size: cover;
      .b-radius(12);
    }
    .input{
      .w(590);
      .h(80);
      border: 0;  // 去除未选中状态边框
      outline: none; // 去除选中状态边框
      background:rgba(245,245,245,1);
      .b-radius(12);
      .fs(30);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color: #000;
      .lh(60);
      .t-indent(40);
      .mt(30);
      caret-color: #000;
    }
    input:focus{
      outline:none;
      caret-color: #000;
    }
    .city{
      .lh(80);
    }
    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #929292;
    }
    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #929292;
    }
    :-ms-input-placeholder {
        /* IE 10+ */
        color: #929292;
    }
    :-moz-placeholder {
        /* Firefox 18- */
        color: #929292;
    }
    .name{
      .mt(50)
    }
    .city_box{
      position: relative;
      span{
        display: block;
        .w(14);
        .h(24);
        position: absolute;
        .top(28);
        .right(80);
        background: url("../../assets/share/jiantou_right.png") no-repeat center;
        background-size: 100%;
      }
      .city{
        margin: 0 auto;
        text-align: center;
        .mt(30);
        color: #929292;
        text-align: left;
      }
      .city_active{
        color: #000;
      }
    }
    .ercode_box{
      position: relative;
      .getercode{
        position: absolute;
        text-align: center;
        .right(80);
        .h(80);
        .fs(30);
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(252,78,76,1);
        .lh(80);
        bottom: 0px;
        background: #f5f5f5;
        border: none;
      }
      .auth_text_blue{
        color: #929292;
      }
    }
    .baomingnumber{
      .mt(30);
      .h(40);
      .fs(28);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color: #000;
      .lh(40);
      span{
        color:rgba(248,63,67,1);
      }
    }
    .selecr_pinpai{
      .w(590);
      margin: 0 auto;
      .mt(30);
      .fs(28);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #464646;
      text-align: left;
      .selecr_pinpai_box{
        display: flex;
        flex-wrap: wrap;
        span{
          text-align: center;
          .lh(34);
          .mr(34);
          .mt(24);
          .h(34);
          background: #F5F5F5;
          .b-radius(24);
          .pl(14);
          .pr(14);
          .pt(6);
          .pb(6);
          .fs(24);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #929292;
          .border-solid(2, #ffffff)
        }
        .active{
          color: #F83F43;
          background: #FEEDE8;
          .border-solid(2, rgba(248, 63, 67, 0.79))
        }
      }
    }
    .baomingxieyi{
      display: flex;
      justify-items: center;
      justify-content: center;
      align-items: center;
      .fs(24);
      .mt(36);
      color: #929292;
      input[type="checkbox"]{
        .w(24);
        .h(24);
        .mr(16);
        color: #929292;
        -webkit-appearance: none;
        border-radius: 0px;
        .border-solid(2, #929292); /*去除未选中状态边框*/
        outline: none;  /*去除选中状态边框*/
        background:rgba(255, 255, 255, 0); /* 透明背景*/
      }
      input:checked{
        background: url("../../assets/imgs/gou.png") no-repeat center;
        background-size: cover;
      }
      a{
        color: #929292;
        display: block;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(146,146,146,1);
        text-decoration: underline;
      }
    }
    .submit{
      .w(470);
      .h(80);
      background:linear-gradient(90deg,rgba(252,101,79,1) 0%,rgba(252,74,76,1) 100%);
      .b-radius(40);
      .fs(40);
      display: block;
      .lh(80);
      margin: 0 auto;
      .mt(22);
      color: #FFF;
    }
  }
  .hezuo{
    .bm_header{
      .h(128);
      background: url("../../assets/imgs/hz_bg.png") no-repeat center;
      background-size: cover;
    }
    .bm_title{
      .w(590);
      // .h(88);
      .fs(28);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(39,39,39,1);
      .lh(44);
      text-align: left;
      margin: 0 auto;
      color: #272727;
      .mt(30);
      // text-overflow: ellipsis;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 2;
      // display: -webkit-box;
      // display: box;
      // overflow: hidden;
    }
    .input{
      .mt(26);
    }
    .submit{
      .mt(36);
    }
    .hezuo_footer{
      margin: 0 auto;
      .mt(40);
      img{
        .w(180);
        .h(180);
      }
      p{
        .mt(20);
        .fs(28);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(70,70,70,1);
      }
    }
  }
  .bmclose{
    display: block;
    .w(64);
    .h(64);
    margin: 0 auto;
    .mt(40);
    // background: url("../../assets/share/close_radius.png") no-repeat center;
    // background-size: 100%;
  }

  .footer_title{
    .h(40);
    .lh(40);
    .fs(24);
    .mt(46);
    .mb(18);
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #929292;
    .footer_right{
      .w(12);
      .h(12);
      .b-top(4, #929292);
      display: inline-block;
      .border-right-solid(4, #929292);
      transform: rotate(45deg);
    }
  }
  .mt30{
    .mt(30);
  }
  .mb30{
    .mb(30)
  }
}
</style>
